<template>
    <Crumb />
    <div class="content">
        <div class="lineStep">
            <el-steps :active="active" finish-status="success" align-center>
                <el-step title="填写商品信息" />
                <el-step title="填写商品促销" />
                <el-step title="填写商品属性" />
                <el-step title="填写商品关联" />
            </el-steps>
        </div>
        <div class="form">
            <keep-alive>
                <AddInfo v-if="active == 0" @next="next" />

            </keep-alive>
            <AddAttribute v-if="active == 1" @next="next" />
            <AddPromotion v-if="active == 2" @next="next" />
            <AddRef v-if="active == 3" @next="next" />
        </div>

    </div>
</template>
    
<script setup lang='ts'>
import Crumb from '@/components/Crumb/index.vue'
import { ref } from 'vue'
import AddInfo from './components/addProductTable/addInfo.vue';
import AddAttribute from './components/addProductTable/addAttribute.vue';
import AddPromotion from './components/addProductTable/addPromotion.vue';
import AddRef from './components/addProductTable/AddRef.vue';

const active = ref(0)

const next = (val: number) => {
    active.value = val
}
</script>
    
<style lang="less" scoped>
.content {
    padding: 20px 15px;
    margin: 80px 20px 0;
    border: 1px solid #ccc;

    .form {
        margin: 20px;
    }
}
</style>